<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,user-scalable=no"/>
    <meta name="apple-touch-fullscreen" content="YES" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta http-equiv="Expires" content="-1" />
    <meta http-equiv="pragram" content="no-cache" />
    <title>我的健康承诺</title>
    
    <link rel="stylesheet" href="./css/styles.css">
    <script type="text/javascript" src="./js/draggabilly.pkgd.min.js"></script>
    <script type="text/javascript" src="./js/draggabilly.pkgd.js"></script>
    <script src="./js/doc-ready.js"></script>
    <script type="text/javascript" src="./js/scripts.js"></script>

    <!--移动端版本兼容 -->
    <script type="text/javascript">
        var phoneWidth = parseInt(window.screen.width);
        var phoneScale = phoneWidth/640;
        var ua = navigator.userAgent;
        if (/Android (\d+\.\d+)/.test(ua)){
            var version = parseFloat(RegExp.$1);
            // andriod 2.3
            if(version>2.3){
                document.write('<meta name="viewport" content="width=640, minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">');
                // andriod 2.3以上
            }else{
                document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
            }
            // 其他系统
        } else {
            document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
        }
    </script>
    <script type="text/javascript">
        document.body.addEventListener('touchmove', function(e) {
            e.stopPropagation();
            e.preventDefault();
        });
    </script>
    <!--移动端版本兼容 end -->
</head>
<body>
<span class="music open" style="display:none">关闭</span>
<audio src="images/ccjj.mp3" loop="loop" id="audio" autoplay="autoplay"></audio>

    <div class="example-frame">
    <!-- 被拖拖动框的父级 -->
        <div id="container" class="example">
            <div class="t" style="background:url(./images/t.png)no-repeat 0px 0px;height:74px;width:239px;position:absolute;top:36%;left:30%;z-index:10;">
            </div>
        <!-- 被拖拖动的框 -->
            <div class="draggie z" >
                
            </div>
        </div>
        <!-- 开启您的健康之旅-->
        <div class="two" id="k" style="z-index:9;"><img src="./images/first.png" height="100%" width="100%" alt="">
        </div>
        <div class="two" style="display:none;">
            <div class="left">
                <img src="./images/left.png" height="100%" width="100%" alt="">
            </div>
            <div class="right">
                <img src="./images/right.png" height="100%" width="100%" alt="">
            </div>
        </div>
        <!-- 音乐 -->
        <audio src="images/music.mp3" loop="loop" id="audio" autoplay="autoplay"></audio>
        <!-- <audio src="images/ccjj.mp3" loop="loop" id="audio" autoplay="autoplay"></audio> -->
        <div class="start" style="display:none" >
            <div class="s s1">
                <img class="d" src="./images/d.png" alt="">
            </div>
                
        </div>
        
        <!-- 选择你的承诺 -->
        <div class="choose-box" style="display:none;">
            <div class="choose">
                <p style="width:70%;margin:50px auto 20px auto;margin-top:6.5%"><img src="./images/title.png" style="width:100%" alt=""></p>
                <ul>
                    <li class="li1" id="li1"></li>
                    <li class="li2"></li>
                    <li class="li3"></li>
                    <li class="li4"></li>
                    <li class="li5"></li>
                    <input type="hidden" style="display:none" class ="hi" value="1">
                </ul>
                <p style="width:70%;margin:50px auto 20px auto;"><button id="btn" style="background:url(./images/btn.png)no-repeat 0px 0px;margin:0px auto;height:70px;display:block;width:28%;border:none;background-size:100% 100%;"></button></p>
                <p style="width:40%;margin:50px auto 20px auto;margin-top:6.5%"><img src="./images/choose.png" class="d" style="width:100%" alt=""></p>
            </div>
            <!-- 承诺对应的页面 --> 
            <div class="list-box"style="opacity:0">
                <div class="list sleep">
                    <div class="s s1" style="z-index:10;height:136px;">
                        <img class="d" src="./images/c.png" alt="">
                    </div>
                </div>
                <div class="list togther">
                    <div class="s s1" style="z-index:10;height:136px;">
                        <img class="d" src="./images/c.png" alt="">
                    </div>
                </div>
                <div class="list eat">
                    <div class="s s1" style="z-index:10;height:136px;">
                        <img class="d" src="./images/c.png" alt="">
                    </div>
                </div>
                <div class="list exercise">
                    <div class="s s1" style="z-index:10;height:136px;">
                        <img class="d" src="./images/c.png" alt="">
                    </div>
                </div>
                <div class="list water">
                    <div class="s s1" style="z-index:10;height:136px;">
                        <img class="d" src="./images/c.png" alt="">
                    </div>
                </div>
                <!-- <div class="s s1">
                    <img src="./images/units-icons.png" alt="">
                </div> -->
                <div class="start" >
            
                
                </div>
                <style type="text/css">
                    .s1{
                    position: absolute;
                    width: 100%;
                    height: 169px;
                    bottom: 0;
                    left: 0;
                    text-align: center;
                    opacity: 1;
                    z-index: 200;
                    }
                </style>
            </div>
        </div>
        <!-- 注册页面 -->
        <div class="reg" style="opacity:0;display:none">
            <form action="" class="form" method="post" name="reg-form">
                <input type="text" name="username" class="username" id="user"> <br/>
                <input type="text" name="pwd" class="pwd" id="pwd" >
            </form>
            <p style="width:70%;margin:50px auto 20px auto;"><button id="btn" class="botton" style="background:url(./images/btn.png)no-repeat 0px 0px;margin:0px auto;height:70px;display:block;width:28%;border:none;background-size:100% 100%;"></button></p>
        </div>
    </div>

<div style="display: none;">
    <script type="text/javascript">
        var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
        document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fc12f3b8998fa1aef9ce5b740a130846b' type='text/javascript'%3E%3C/script%3E"));
    </script>
</div>
</body>

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/script2.js" type="text/javascript"></script>
<script src="js/weixin.js" type="text/javascript"></script>
<script src="js/weixin2.js" type="text/javascript"></script>
</html>